import { NavBar, Card, Tag, Modal } from 'antd-mobile'
import { useEffect, useState } from 'react'
import useScorll from '@/hooks/useScorll'
import './index.scss'
import '@/styles/common.scss'
import apis from '@/apis'
const Project: React.FC = () => {
  const { scrollToTop } = useScorll()
  useEffect(() => {
    scrollToTop()
  }, [])
  const [projectData, setprojectData] = useState(null)
  useEffect(() => {
    async function queryInfo() {
      const res = await apis.getInfoApi()
      setprojectData(res.projectdata)
    }
    queryInfo()
  }, [])
  function projectType(type: string) {
    if (type === 'H5') {
      return (
        <Tag color="#2db7f5" style={{ fontSize: 16 }}>
          H5
        </Tag>
      )
    } else if (type === 'PC') {
      return (
        <Tag color="#87d068" style={{ fontSize: 16 }}>
          PC
        </Tag>
      )
    } else {
      return (
        <Tag color="#108ee9" style={{ fontSize: 16 }}>
          小程序
        </Tag>
      )
    }
  }
  function technologyStack(type: string) {
    if (type === 'H5') {
      return '同和泰人寿官微(单击显示)'
    } else if (type === 'PC') {
      return '同和泰统一管理平台(单击显示)'
    } else if (type === '小程序') {
      return '同全民保险计划小程序(单击显示)'
    } else {
      return type
    }
  }
  function echnologyStackClick(type: string) {
    if (projectData) {
      if (type === 'H5') {
        Modal.alert({
          content: <div>{projectData[0].TechnologyStack}</div>,
          confirmText: '关闭',
        })
      } else if (type === 'PC') {
        Modal.alert({
          content: <div>{projectData[4].TechnologyStack}</div>,
          confirmText: '关闭',
        })
      } else if (type === '小程序') {
        Modal.alert({
          content: <div>{projectData[2].TechnologyStack}</div>,
          confirmText: '关闭',
        })
      }
    }
  }
  return (
    <div style={{ paddingBottom: 80 }}>
      <NavBar back={null} className="navBar">
        项目经验
      </NavBar>
      {projectData &&
        projectData.map((item, index) => (
          <Card title={'项目' + (index + 1)} key={index}>
            <div className="projectContent">
              <div>
                <span>项目名称：</span>
                {item.projectName}
              </div>
              <div>
                <span>项目类型：</span>
                {projectType(item.projectType)}
              </div>
              <div>
                <span>所属公司：</span>
                {item.corporation}
              </div>
              <div>
                <span>项目描述：</span>
                {item.projectDescription}
              </div>
              <div>
                <span>技术栈：</span>
                {item.TechnologyStack === 'PC' ||
                item.TechnologyStack === 'H5' ||
                item.TechnologyStack === '小程序' ? (
                  <span
                    onClick={() => echnologyStackClick(item.TechnologyStack)}
                    style={{ color: '#217AD3', fontWeight: 400 }}
                  >
                    {technologyStack(item.TechnologyStack)}
                  </span>
                ) : (
                  item.TechnologyStack
                )}
              </div>
              <div>
                <span>项目职责：</span>
                {item.projectDuty === 'T' ? (
                  <span
                    onClick={() => {
                      Modal.alert({
                        content: projectData[0].projectDuty.map(
                          (item, index) => <div key={index}>{item}</div>
                        ),
                        confirmText: '关闭',
                      })
                    }}
                    style={{ color: '#217AD3', fontWeight: 400 }}
                  >
                    同和泰人寿官微(单击显示)
                  </span>
                ) : (
                  item.projectDuty
                )}
              </div>
            </div>
          </Card>
        ))}
    </div>
  )
}
export default Project
